import React from 'react'
import { styled, OutlinedInput } from '@mui/material'

const Root = styled('div')({})

const JumpInput = styled(OutlinedInput)(({ theme }) => ({
  width: 44,
  height: 32,
  margin: '0 8px',
  input: {
    textAlign: 'center',
  },
  '& fieldset': {
    boxShadow: 'initial',
  },
}))

export default function Jumper(inProps) {
  const inputRef = React.useRef()
  const { onChange, ...rest } = inProps

  const onBlur = e => {
    let nextPage = Number.parseInt(e.target.value)

    if (nextPage) {
      onChange(e, nextPage)
    }
    e.target.value = ''
  }

  return (
    <Root sx={{ ml: 1 }} {...rest}>
      跳至
      <JumpInput
        inputRef={inputRef}
        onBlur={onBlur}
        onKeyDown={e => {
          if (e.keyCode === 13) {
            inputRef.current.blur()
          }
        }}
      />
      页
    </Root>
  )
}
